//条目的水平布局（用于展示商品简要信息）（用在新人推荐栏目上）

import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native'
import { Heading2, Title, Price } from '../../widget/Text'
import { screen, system } from '../../common'
import { color } from '../../widget'

type Props = {
    info: Object,
    onPress: Function,
}


class SellGroupItem extends PureComponent<Props> {

    render() {
        let info = this.props.info

        let title = info.title
        let introduce = info.introduce
        let price = info.price
        let imageUrl = info.imageUrl

        return (
            <TouchableOpacity style={styles.container} onPress={this.props.onPress}>
                <Image style={styles.image} resizeMode='contain' source={{ uri: imageUrl, cache:'force-cache' }} />
                <View style={styles.leftContainer}>
                    <Title marginRight={10}>{title}</Title>
                    <View flex={1}/>
                    <View style={styles.priceStyle}>
                        <Image style={styles.memberPrice} resizeMode='contain' source={require('../../img/home/member_price.png')}/>
                        <Price>¥{price}</Price>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        marginLeft:10,
        marginRight: 10,
        width: screen.width-20,
        height: screen.width / 4,
        borderBottomWidth: screen.onePixel,
        borderColor: color.border,
        backgroundColor: 'white',
        elevation:10,
    },
    leftContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'flex-start',
        marginTop: 10,
        marginBottom: 10,
    },
    priceStyle:{
        flexDirection: 'row',
    },
    memberPrice:{
        width: screen.width * 0.12,
        height: screen.width * 0.048,
        marginRight:5,
    },
    image: {
        width: screen.width / 7,
        height: screen.width / 7,
        justifyContent: 'center',
        alignSelf: 'center',
        borderRadius: 5,
        marginLeft: 10,
        marginRight: 20,
    }
})

export default SellGroupItem
